<template>
  <div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})


// 渲染图表
const renderChart = () => {
  const options = {
    "normal": {
      "top": 100,
      "left": 300,
      "width": 500,
      "height": 400,
      "zIndex": 6,
      "backgroundColor": ""
    },
    "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
    "tooltip": {
      "show": true,
      "trigger": "item"
    },
    "legend": {
      "show": true,
      "icon": "circle",
      "left": "25%",
      "top": "90%",
      "orient": "horizontal",
      "textStyle": {
        "fontSize": 12,
        "color": "#fff"
      },
      "data": ["巴勒斯坦", "以色列"]
    },
    "radar": {
      "center": ["50%", "49%"],
      "radius": "65%",
      "startAngle": 90,
      "splitNumber": 4,
      "shape": "polygon",
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 15
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: '#0d6dba',
          opacity: 0.1
        }
      },
      "axisLabel": {
        "show": false,
        "fontSize": 18,
        "color": "#fff",
        "fontWeight": "normal"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4f8bbe',
          opacity: 1
        }
      },
      splitLine: {

        lineStyle: {
          color: '#4f8bbe',
          opacity: 0.5
        }
      },
      "indicator": [
        { name: '经济', max: 100 },
        { name: '社会', max: 100 },
        { name: '科技', max: 100 },
        { name: '产业结构', max: 100 },
        { name: '国际关系', max: 100 },
        { name: '教育', max: 100 },
        { name: '健康', max: 100 }]
    },
    "series": [{
      "name": "巴勒斯坦",
      "type": "radar",
      "symbol": "circle",
      "symbolSize": 10,
      "areaStyle": {
        "normal": {
          "color": "rgba(245, 166, 35, 0.4)"
        }
      },
      itemStyle: {
        color: 'rgba(245, 166, 35, 1)',
        borderColor: 'rgba(245, 166, 35, 0.3)',
        borderWidth: 10,
      },
      "lineStyle": {
        "normal": {
          "type": "dashed",

          "color": "rgba(245, 166, 35, 1)",
          "width": 2
        }
      },
      "data": [
        [50, 50, 55, 40, 90, 30, 48]
      ]
    }, {
      "name": "以色列",
      "type": "radar",
      "symbol": "circle",
      "symbolSize": 10,
      "itemStyle": {
        "normal": {
          color: 'rgba(19, 173, 255, 1)',
          "borderColor": "rgba(19, 173, 255, 0.4)",
          "borderWidth": 10
        }
      },
      "areaStyle": {
        "normal": {
          "color": "rgba(19, 173, 255, 0.5)"
        }
      },
      "lineStyle": {
        "normal": {
          "color": "rgba(19, 173, 255, 1)",
          "width": 2,
          "type": "dashed"
        }
      },
      "data": [
        [90, 90, 90, 90, 10, 90, 90]
      ]
    }]
  }

  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
// watch(
//   () => regions,
//   () => {
//     renderChart()
//   }, {
//   deep: true
// }

// )
</script>

<style lang="scss" scoped></style>
